<template>
    <div class="right">
        <h3>报警记录</h3>
        <div class="switch">
            <label for="">开关</label>
            <input type="checkbox" v-model="switchCol">
        </div>
        <div class="record">
            <table>
                <tr>
                    <th>报警时间</th>
                    <th>报警描述</th>
                </tr>
                <tr v-for="item in data">
                    <td>{{ dayjs(item.createTime).format('HH:mm:ss') }}</td>
                    <td>{{ item.desc }}</td>
                </tr>
            </table>
        </div>
        <hr />
        <button @click="createESAlarm">创建报警</button>
    </div>
</template>

<script setup>
import dayjs from "dayjs"
import { ref, onUnmounted, onBeforeUnmount } from "vue"
import getMyProjectManager from '@/scripts/getMyProjectManager';
import { ESAlarm } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
import { createVueDisposer, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
const myProjectManager = getMyProjectManager();
const d = createVueDisposer(onBeforeUnmount)
// 开关控制（双向绑定）
const switchCol = toVR(d, [myProjectManager._alarmCollection, "switch"])
// 报警数据
const data = ref([])
myProjectManager._alarmCollection.show = true
myProjectManager._alarmCollection.updateEvent.don(() => {
    let arr = []
    data.value = myProjectManager._alarmCollection._map.forEach(item => {
        arr.push(item.extras)
    })
    data.value = arr
    console.log(data.value)
})

// 存储可视化对象
var sceneObjects = []

// 创建报警
const createESAlarm = () => {
    var sceneObj = myProjectManager.createSceneObject(ESAlarm)
    if (!sceneObj) return
    sceneObj.editing = true
    sceneObj.mode = 'cylinder'
    sceneObj.radius = 30
    sceneObjects.push(sceneObj)
}

// 销毁所有对象
const destroySceneObject = () => {
    if (sceneObjects.length > 0) {
        sceneObjects.forEach(item => {
            myProjectManager.destroySceneObject(item)
            item = undefined
        })
        sceneObjects.length = 0
    }
}

onUnmounted(() => {
    destroySceneObject()
    myProjectManager._alarmCollection.show = false
})


</script>

<style scoped>
.right {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: url(../../assets/left/kuang.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.record {
    height: 50%;
    width: 100%;
    overflow: auto
}

.switch {
    position: absolute;
    top: 10px;
    right: 20px
}

table {
    width: 100%;
}

table>tr>th,
table>tr>td {
    text-align: center;
}


table>tr>th:last-child,
table>tr>td:last-child {
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

button {
    width: 150px;
    padding: 10px 0px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>